<template>
  <div>
    <!--1. show-checkbox 显示选择框
        2. default-expand-all 默认展开
        3. check-strictly  设置true，可以关闭父子关联 -->
    <el-tree
      ref="refTree"
      node-key="id"
      show-checkbox
      default-expand-all
      check-strictly
      :data="list"
      :props="{ label: 'name' }"
    />

    <el-button size="small" @click="hClose">取消</el-button>
    <el-button size="small" type="primary" @click="hSubmit">确定</el-button>
  </div>
</template>
<script>
import { getPermissionList } from '@/api/permissions'
import { tranListToTreeData } from '@/utils/index'
import { getRoleDetail, assignPerm } from '@/api/settings'
export default {
  props: {
    roleId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      list: [] // 权限列表信息
    }
  },
  created() {
    // 获取权限列表
    this.loadPermissionList()
    // 根据角色id获取它已经具有的权限
    this.loadPermissionByRoleId()
  },
  methods: {
    // 获取权限列表
    async loadPermissionList() {
      const res = await getPermissionList()
      // 保存数据
      // 数组转为tree结构
      this.list = tranListToTreeData(res.data)
    },
    // 根据角色id获取它已经具有的权限
    async loadPermissionByRoleId() {
      const res = await getRoleDetail(this.roleId)
      console.log('已经具有的权限信息', res)
      // 当前角色的权限信息：res.data.permIds
      // 数据回填到el-tree中，让某些个复选框处于选中状态
      // 调用setCheckedKeys方法
      this.$refs.refTree.setCheckedKeys(res.data.permIds)
    },
    // 点击确定，保存修改
    async hSubmit() {
      // 修改角色分配权限，发送请求
      // 通过el-tree组件的getCheckedKeys来获取用户选中的id列表(permIds)
      const permIds = this.$refs.refTree.getCheckedKeys()
      await assignPerm({ id: this.roleId, permIds })
      // 提示
      this.$message.success('操作成功')
      // 关闭弹框
      this.$emit('close')
    },
    // 点击取消，关闭弹框
    hClose() {
      this.$emit('close')
    }
  }
}
</script>
